<template>
    <div class="mechanism">
        <!-- 面包屑导航 -->
        <breadcrumb :title="title" :showtitle="showtitle" :breadcrumbList='breadcrumbList'></breadcrumb>
        <!-- tabs切换 -->
        <el-tabs  ref="tableref"  class="el-tabs"  v-model="activeName"  type="card">
          <el-tab-pane
            label="连锁机构"
            name="first"
          >
          </el-tab-pane>
        </el-tabs> 
        <div class="box" v-if="show==1">
              <el-row  type="flex">
              <el-col>
                <el-button  class="addbtn"  @click="addbtn"  type="info">添加机构</el-button>
                <el-button class="btn"  @click="change" type="info">机构设置</el-button>
              </el-col>
               <el-col style="margin-right:5px">
                   <el-input  prefix-icon="el-icon-search" placeholder="请输入内容"  v-model="jigoufrom.org_name" class="input-with-select">
                     <el-button  suffix-icon="el-icon-date"  @click="serach" type="info" slot="append">搜索</el-button>
                   </el-input>
              </el-col>
              </el-row>
              <!-- 机构列表 -->
              <el-table
              ref="tabref"
              :height="tabheight"
               class="table-box"
              :data="tableData"
              style="width: 100% ;margin-top:5px">
              <el-table-column
                prop="org_name"
                label="机构名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                width="180">
              </el-table-column>
              <el-table-column
                prop="username"
                label="负责人">
              </el-table-column>
                 <el-table-column
                prop="mobile"
                label="电话">
              </el-table-column>
                 <el-table-column
                label="Logo">
                <template slot-scope="{row}">
                         <img  style="width:50px;height:50px" :src='"/api"+row.wx_logo' >
                </template> 
              </el-table-column>
                <el-table-column
                prop="wx_appid"
                label="小程序ID">
              </el-table-column>
               <el-table-column
                prop="address"
                label="状态">
                <template slot-scope="{row}">
                   <span  style="color:#FF2020" v-if="row.status == 0">已停用</span>
                   <span   style="color:#85C0B7" v-if="row.status == 1">正常营业</span>
                </template>
               </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                 <template slot-scope="{row}">
                    <el-dropdown 
                     slot="dropdown"
                    >
                     <span class="el-dropdown-link">
                          <span class="imghover"></span>
                       <!-- 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> -->
                         <!-- <img  class="imghover" src="@/assets/css/yingxiao/矢量智能对象 拷贝 2.png" alt=""> -->
                     </span>
                     <el-dropdown-menu slot="dropdown">
                       <div @click="showshop(row)" class="itemcss">查看门店</div>
                       <div @click="edit(row)"    class="itemcss">编辑机构</div>
                       <div @click="tybtn(row)"   class="itemcss">使用账号</div>
                     </el-dropdown-menu>
                   </el-dropdown>
                 </template>  
              </el-table-column>
              </el-table>
              <el-row type="flex" justify="end">
                 <el-pagination
                 background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-sizes="[10, 15, 20, 400]"
                  :total="total">
                </el-pagination>
              </el-row>
              <!-- </el-tab-pane>
            </el-tabs> -->
        <!-- 添加弹窗     -->
        <el-dialog
           class="eldlong"
          :title="showadmin"
          :visible.sync="addlong"
          :show-close="false"
           width="50%"
          :close-on-click-modal="false"
          @close="close"
          >
          <el-form ref="form"  :rules="rules" :model="addform" label-width="100px">
             <el-form-item prop="org_name" label="机构名称：">
               <el-input v-model="addform.org_name"></el-input>
             </el-form-item>
              <el-form-item prop="address" label="详细地址：">
               <el-input v-model="addform.address"></el-input>
             </el-form-item>
             <el-form-item prop="address" label="地址：">
               <!-- <el-input v-model="addform.address"></el-input> -->
                 <el-cascader
                     placeholder="请选择地址"
                     v-model="addform.area"
                     :options="diqu"
                     collapse-tags
                     clearable>
                  </el-cascader>
                  <!-- :props="props" -->
             </el-form-item>
             <el-row type="flex">
                 <el-col>
                    <el-form-item prop="username" label="负责人姓名：">
                       <el-input v-model="addform.username"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="mobile" label="负责人电话：">
                          <el-input v-model="addform.mobile"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
              <el-form-item  prop="identification" label="连锁机构：">
               <el-input v-model="addform.identification"></el-input>
             </el-form-item>
               <el-row type="flex">
                 <el-col>
                    <el-form-item prop="admin_user" label="账号：">
                       <el-input v-model="addform.admin_user"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item  label="密码">
                          <el-input v-model="addform.password"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
               <el-row type="flex">
                 <el-col>
                    <el-form-item prop="wx_appid" label="小程序ID：">
                       <el-input v-model="addform.wx_appid"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="wx_appsecret" label="APPscret：">
                          <el-input v-model="addform.wx_appsecret"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
               <el-row type="flex">
                 <el-col>
                    <el-form-item prop="wx_mpid" label="商户号：">
                       <el-input v-model="addform.wx_mpid"></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col>
                      <el-form-item prop="wx_key" label="支付key：">
                          <el-input v-model="addform.wx_key"></el-input>
                       </el-form-item>
                 </el-col>
             </el-row>
             <el-form-item prop="wx_logo" label="Logo：">
                <el-upload
                   :class="{disable : filelistlength}"
                   action="http://202.102.249.191:84/beautiful/store/file"
                   :limit="1"
                   list-type="picture-card"
                   :on-change="uploadchange"
                   :on-success="okupload"
                   :file-list="fileList"
                   :on-remove="remove"
                   >
                   <i class="el-icon-plus"></i>
                 </el-upload>
              </el-form-item>
          </el-form>
          <!-- <span  class="dialog-footer"> -->
              <el-row type="flex" justify="center">
                    <el-button  type="info" class="btn" @click="detbtn">取 消</el-button>
                    <el-button  class="addbtn" @click="okbtn">确 定</el-button>
              </el-row>
          <!-- </span> -->
        </el-dialog>
        <!-- 收费弹窗 -->
        <addcharge  :tableData="tableData" :showchange.sync='showchange'></addcharge>
        <!-- 停用机构 -->
        <account :nodedata='nodedata' :showaccount.sync='showaccount'></account>
        </div>
        <!-- 查看门店 -->
        <div v-if="show ==2">
           <shop :account_id="account_id"></shop> 
        </div>
    </div>
</template>
<script>
import elDlong from "./components/el-dlong"
import breadcrumb from "@/components/breadcrumb"
import { getjigou ,editjigou,addjigou,getshoplist,diqulist,alljigoulist} from "@/api/menu/index.js"
import account from "./components/account";
import shop from "./components/shop"
import addcharge from "./components/addcharge"
import {mapState} from "vuex"
export default {
    name:'menu',
    data() {
        return {
             diqu:[],
             fileList:[],//上传的图片列表
             tabheight:0,//tab表格的高度
             total:0, //总条数
             //添加机构的验证规则
             rules:{
              // org_name:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // address:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // username:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // mobile:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // identification:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // admin_user:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // password:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // wx_appid:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // wx_mpid:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              // wx_key:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              //  wx_logo:[{required: true, message: '请选择活动资源', trigger: 'blur'}],
              //  wx_appsecret:[{required: true, message: '请选择活动资源', trigger: 'blur'}]
            },
            //添加机构的表单
            addform:{
                 org_name:"",//机构名称
                 address:[],//机构详细地址
                 username:'',//负责人姓名
                 mobile:'',//负责人手机号码
                 identification:'',//机构代码
                 admin_user:'',//机构管理账号
                 password:'',//机构管理密码
                 wx_appid:'',//微信小程序ID
                 wx_appsecret:'',//appsecret
                 wx_mpid:'',//商户ID
                 wx_key:'',//支付key
                 wx_logo:''//logo图片
            },
             account_id:0,//查询门店的id
             nodedata:{},//停用门店的数据
             showchange:false, //收费弹窗的显示和隐藏
             show : 1,
             addlong: false,//添加弹窗的显示和隐藏
             showaccount:false,
             activeName: 'first',
             search :"",//搜索的内容
             tableData: [], //机构列表格数据源
             breadcrumbList:[{name:"机构管理"}],//面包屑导航
             title:'',
             showtitle:false,
             jigoufrom:{
               limit:'10',//每页显示的条数
               page:0,//页数
               org_name:''
               } 
           }
    },

    methods:{
      async serach(){
           const {data} = await  getjigou(this.jigoufrom)
           this.total = data.total
           this.tableData = data.list
          
      },
      //  获取机构列表
       async getjigou(){
          const {data} = await  getjigou(this.jigoufrom)
          this.total = data.total
          this.tableData = data.list
       },
       //添加收费标准确定
        addbtn(){
            this.fileList = []
            this.addlong =true
            //  this.addlong =true
        },
        // 编辑机构
        edit(val){
          this.fileList = [{url:"http://localhost:8080/api"+val.wx_logo}]
           this.addlong =true
           this.addform =JSON.parse(JSON.stringify(val))
           this.addform.area=[val.province,val.city,val.region]
          //  province
          //  city
          //  region
        },
        // 停用设置
        async tybtn(val){
          this.nodedata ={
            account_id: val.account_id,
            status:0
          }
          this.showaccount = true
        },
        // 查看门店
        showshop(val){
              this.account_id =val.account_id
              this.show = 2
        }, 
        // 收费设置按钮
        change(){
          this.showchange = true
        },
        //点击添加编辑触发
       async  okbtn(){
         if(this.addform.account_id){
            await editjigou(this.addform)
            await this.getjigou()
             this.addlong =false
         }else {
           this.$refs.form.validate(async val=>{
           if(val){
             var data = await addjigou(this.addform) 
               if(data.code == 200){
               this.getjigou()
               this.$message({
                 message: '添加成功', 
                 type: 'success'
               })
                this.addlong =false
               }else {
                this.$message.error('失败')
                this.addlong =false
               }
           }
         })
         }
        },
        //点击添加机构取消触发
        detbtn(){
            this.addlong =false
        },
        //图片上传前检车
        beforeAvatarUpload(){},
        // 上传成功后执行
        okupload(val){
          this.addform.wx_logo =val.data
        },
        // 上传成功失败都会执行
        uploadchange(file,filelist){
          this.fileList=filelist.map(item=>item)
        },
        remove(file,filelength){
          this.fileList = filelength
        },
        //关闭弹窗的回调
        close(){
          console.log(5555);
          this.fileList = []
            this.$refs.form.resetFields()
               this.addform ={
                 area:[],
                 org_name:"",//机构名称
                 address:'',//机构详细地址
                 username:'',//负责人姓名
                 mobile:'',//负责人手机号码
                 identification:'',//机构代码
                 admin_user:'',//机构管理账号
                 password:'',//机构管理密码
                 wx_appid:'',//微信小程序ID
                 wx_appsecret:'',//appsecret
                 wx_mpid:'',//商户ID
                 wx_key:'',//支付key
                 wx_logo:''//logo图片
            }
        },
        handleSizeChange(val){
          this.jigoufrom.limit=val
          this.getjigou()
        },
        // 点击页码值出发
        handleCurrentChange(val){
          this.jigoufrom.page=val
          this.getjigou()
        },
          // 表格高度自适应
        table () {
        if (!this.$refs.tabref) {
          return
        }
        this.tabheight = window.innerHeight - this.$refs.tabref.$el.offsetTop - 32
    }
    },
    computed:{
      ...mapState(['userInfo']),
      //控制上传数量
      filelistlength(){
        return this.fileList.length == 1
      },
      //弹出框标题
      showadmin() {
        if(this.addform.account_id){
          return '编辑机构'
        }else{
          return '添加机构'
        }
      }
    },
    components:{
        elDlong,
        breadcrumb,
        account,
        shop ,
        addcharge
    },
    async created(){
      // 获取所有的机构
      const a =  await alljigoulist({admin_id:this.userInfo.admin_id})
      console.log(a);
      //获取所有的地区
      const data= await diqulist()
      this.diqu = data.data
    },
    mounted(){
      this.$nextTick(()=>{
          this.tabheight = window.innerHeight - this.$refs.tabref.$el.offsetTop -32
      })
       window.addEventListener('resize', this.table)
       this.getjigou()
    }
}
</script>
<style lang="less" scoped>
 /deep/ .el-dialog__header {
   background-color: #009380!important;
   .el-dialog__title { 
     color: aliceblue!important;
   }
}
  /deep/  .el-table__header {
            th {
                 background-color: #E9E9E9!important;    
          }
  }
  .el-tabs {
    /deep/ .el-tabs__header {
    border-bottom: 1px solid #CCE9E6!important;
    }
    /deep/ .el-tabs__nav {
        border-top: 3px solid #009380!important;
        border-right: 1px solid #CCE9E6!important;
    }
    /deep/ .el-tabs__item.is-active {
      color: #333333; 
      font-weight: bold;
    }
  } 
   /deep/ .el-main {
    height: 100%!important;
    background-color: red;
    // display: block;
  }
  .itemcss {
    padding: 10px;
    &:hover{color: #09A58B!important;}   
  }

  /deep/ .el-pager  {
    .active {
       margin: 0 5px;
    background-color: #009380!important;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
    }
}
/deep/  .disable {
   .el-upload--picture-card {
  display: none;
}
 }

</style>